<template>
  <div class="main">
    <div class="titSty">
      <div class="tit">会议组（{{ state.list.length }}）</div>
      <div>
        <el-button
          color="#FFBD00"
          style="color: #fff"
          type="primary"
          @click="newmeet"
        >
          新增会议组
        </el-button>
      </div>
    </div>
    <div class="sphyList">
      <div class="itemSty_cj" @click="startmeet">
        <img src="./../../assets/images/kshy.png" alt="" />
        <div class="nr">
          <div class="nr_kshy">快速会议</div>
          <div class="nr_djjr">点击进入</div>
        </div>
      </div>
      <div v-for="(item, index) in state.list" :key="index">
        <div class="itemSty_jxz">
          <div
            class="disSty"
            style="justify-content: flex-end"
            v-if="item.stateCode == '0'"
          >
            <div
              class="iconBgc"
              style="margin-right: 10px"
              @click="editmeet(item)"
            >
              <el-icon color="#fff">
                <EditPen />
              </el-icon>
            </div>
            <div class="iconBgc" @click="delmeet(item)">
              <el-icon color="#fff">
                <Delete />
              </el-icon>
            </div>
          </div>
          <div class="disSty" style="margin-top: 10px">
            <div class="btSty">会议组名称</div>
            <div class="nrSty">{{ item.meetingTheme }}</div>
          </div>
          <div class="disSty" style="margin-top: 20px">
            <div class="btSty">会议组人员</div>
            <div class="nrSty" :title="item.meetingMembers">
              {{ item.meetingMembers }}
            </div>
          </div>
          <div
            style="position: absolute; bottom: 24px; left: 28px; right: 28px"
          >
            <el-button
              :color="item.stateCode == 0 ? '' : '#27C69F'"
              style="color: #fff; width: 100%"
              type="primary"
              @click="joinmeet(item)"
            >
              {{ item.stateCode == 0 ? "开始会议" : "邀请进行中" }}
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <kmeet
      :show="state.dialog"
      :isk="state.isk"
      :pps="state.people"
      :meet="state.meet"
      @back="kback"
    />
  </div>
</template>

<script setup>
import kmeet from "./kmeet.vue";
import { useMyStore } from "@/pinia/store";
import { ElMessageBox, ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
import {
  getpeoplelist,
  getgrouplist,
  getchangeGroup,
} from "@/api/videoMeet.js";

const state = reactive({
  isk: 0, //0快速 1新增 2编辑 3会议内编辑
  list: [],
  people: [],
  meet: {},
  dialog: false,
});

const getList = async () => {
  let data = {};
  let res = await getgrouplist(data);
  state.list = res.data?.mgList || [];
  console.log("查会议组", res);
};
const getPeople = async () => {
  let res = await getpeoplelist();
  state.people = res.data?.sysUsers || [];
};
const newmeet = () => {
  state.isk = 1;
  state.meet = { meetingGroupId: "", meetingTheme: "", meetingMemberIds: [] };
  state.dialog = false;
  setTimeout(() => {
    state.dialog = true;
  }, 300);
};
const editmeet = (item) => {
  state.isk = 2;
  state.meet = { ...item };
  state.dialog = false;
  setTimeout(() => {
    state.dialog = true;
  }, 300);
};
const delmeet = (item) => {
  ElMessageBox.confirm("您确认要删除当前会议信息么？", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    // 删除操作
    let data = {
      optType: "D", // D 表示删除操作
      meetingGroupId: item.meetingGroupId,
    };
    getchangeGroup(data)
      .then((res) => {
        ElMessage.success("会议组删除成功！");
        getList(); // 刷新会议组列表
      })
      .catch((error) => {
        console.error(error);
        ElMessage.error("会议组删除失败，请重试！");
      });
  });
};

const joinmeet = (item) => {
  console.log("进入会议", item);
  if (
    "" + item.creator != localStorage.getItem("userId") &&
    item.stateCode == "0"
  ) {
    ElMessage.error("会议尚未开始，请等待...");
    return;
  }
  const store = useMyStore();
  state.meet = item;
  store.params.meet = state.meet;
  store.params.people = state.people;
  // this.$router.push("/videoMeet/meet");
  router.push("/videoMeet/meet");
};

const startmeet = () => {
  state.isk = 0;
  state.meet = { name: "" };
  state.dialog = false;
  setTimeout(() => {
    state.dialog = true;
  }, 300);
};
const kback = (item) => {
  console.log("kback---", item);

  if (state.isk == 0 && item != null) {
    console.log("item", item);
    state.meet = item;
    const store = useMyStore();
    console.log("state.isk", store);
    store.params.meet = state.meet;
    store.params.people = state.people;
    router.push("/videoMeet/meet");
  }
  getList();
};

onMounted(() => {
  getPeople();
  setTimeout(() => {
    getList();
  }, 300);
});
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/images/bk.png");
  background-size: 100% 100%;
  position: relative;
  padding: 50px;
  .titSty {
    display: flex;
    justify-content: space-between;
    .tit {
      font-weight: 600;
      font-size: 18px;
      color: #293555;
      line-height: 19px;
    }
  }
}
.sphyList {
  display: flex;
  flex-wrap: wrap;
  .itemSty_cj {
    width: 320px;
    height: 200px;
    background: #6e8dfb;
    border-radius: 16px;
    margin: 20px 20px 0 0;
    position: relative;
    cursor: pointer;
    .nr {
      position: absolute;
      right: 60px;
      top: 76px;
      bottom: 0;
      .nr_kshy {
        font-family: Arial, Arial;
        font-weight: 900;
        font-size: 18px;
        color: #ffffff;
        line-height: 19px;
      }
      .nr_djjr {
        text-align: center;
        font-weight: 500;
        font-size: 14px;
        color: #ffffff;
        line-height: 19px;
        margin-top: 12px;
      }
    }
  }
  .itemSty_jxz {
    width: 320px;
    height: 200px;
    background: #ffffff;
    border-radius: 16px;
    opacity: 0.9;
    margin: 20px 20px 0 0;
    padding: 12px 28px 24px;
    position: relative;
    .iconBgc {
      padding: 0px 4px;
      background-color: #fff;
      background: #6e8dfb;
      border-radius: 4px;
      width: 22px;
      height: 22px;
      cursor: pointer;
    }
    .disSty {
      display: flex;
    }
    .btSty {
      width: 80px;
      font-weight: 600;
      font-size: 14px;
      color: #293555;
      line-height: 19px;
      margin-right: 10px;
    }
    .nrSty {
      font-weight: 400;
      font-size: 14px;
      color: #58627b;
      line-height: 19px;
      font-weight: 400;
      font-size: 14px;
      color: #58627b;
      line-height: 19px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 定义文本的行数 */
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .itemSty_ks {
    width: 320px;
    height: 200px;
    background: #ffffff;
    border-radius: 16px;
    opacity: 0.9;
    margin: 20px 20px 0 0;
    padding: 12px 28px 24px;
    position: relative;
    .iconBgc {
      padding: 4px;
      background-color: #fff;
      background: #6e8dfb;
      border-radius: 4px;
      width: 22px;
      height: 22px;
    }
    .disSty {
      display: flex;
    }
    .btSty {
      font-weight: 600;
      font-size: 14px;
      color: #293555;
      line-height: 19px;
      margin-right: 20px;
    }
    .nrSty {
      font-weight: 400;
      font-size: 14px;
      color: #58627b;
      line-height: 19px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 定义文本的行数 */
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
